<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
 <%@ taglib prefix="gly" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="${pageContext.request.contextPath}/static/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/font.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/xadmin.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/cookie.js"></script>
</head>
<body>
  <form  class="form-horizontal" id="form1" role="form" style="width: 550px;margin: 10px auto;" action="${pageContext.request.contextPath}/manager/addManager"  method="post" >
  
				    <div class="form-group">
					    <label for="name" class="col-sm-3 control-label">账户名称:</label>
					    <div class="col-sm-9">
					      <input type="text" style="width:200px;" class="form-control" id="name" placeholder="请输入名称" name="name">
					    </div>
				   </div>
				   <div class="form-group">
					    <label for="name" class="col-sm-3 control-label">手机号:</label>
					    <div class="col-sm-9">
					      <input type="text" style="width:200px;" class="form-control" id="phone" placeholder="请输入手机号" name="phone">
					    </div>
				   </div>
				   <div class="form-group">
					    <label for="password" class="col-sm-3 control-label">密码:</label>
					    <div class="col-sm-9">
					      <input type="password" style="width:200px;" class="form-control" id="password" placeholder="请输入密码" name="password">
					    	 
					    		<br><div class="box">
					   <div class="bg"></div>密码强度：
					     <span class="spans" style='color:f5f5f5'>弱</span>
					</div> 
					    </div>
				   </div>
				     <div class="form-group">
					    <label for="password2" class="col-sm-3 control-label">确认密码:</label>
					    <div class="col-sm-9">
					      <input type="password" style="width:200px;" class="form-control" id="password2" placeholder="请输入确认密码" name="password2">
					    </div>
				   </div>
				   
				
				   <div class="form-group">
				    <label for="inputEmail3" class="col-sm-3 control-label"></label>
				    <div class="col-sm-9">
				    	<input  id="add_role_btn" class="btn btn-info col-sm-12" value="保存" type="submit"/>
				    </div>
	   			</div>
	</form>
 	<script src="${pageContext.request.contextPath}/static/js/jquery-1.12.3.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js" type="text/javascript"></script>				
<script type="text/javascript">
//密码强度设置
$(document).ready(function() {
	$("#password").keyup(function() {
		var textMax = 16;
		$("#password").attr("maxlength", textMax); //追加最大值
		var boxlen = $(".box").css("width"); //添加width属性
		//alert(boxlen);
		var inputlength = $("#password").val().length; //获取输入值的个数
		var bgwidth = (inputlength / textMax) * parseInt(boxlen);
		//alert(bgwidth);
		$(".bg").css("width", bgwidth);

		if(bgwidth <= 120) //
		{
			$(".bg").css("background-color", "#F00");
			$(".spans").html("<span>弱</span>");
		} else if(120 < bgwidth) {
			if($("#password").val().match(/\d/) && $("#password").val().match(/[a-zA-Z]/)) {
				$(".bg").css("background-color", "#6F3");
				$(".spans").html("<span>强</span>");
			} else {
				$(".bg").css("background-color", "#F90");
				$(".spans").html("<span>中</span>");
			}
		}

	})
})

/* $("#add_role_btn").click(function(){
	$.ajax({
		url:"${pageContext.request.contextPath}/manager/addManager",
		type:"post",
		async:true,
		data:$("#form1").serialize(),
		success:function(data){
			alert(data);
		}
	}); 
	
}); */
</script>
</body>
</html>